<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <title>Document</title>

</head>
<body>
    
    <div>
        <button class="btn btn-info" id="add">新增</button>
        <button class="btn btn-info" id="delete">删除</button>
        <button class="btn btn-info" id="edit">编辑</button>
        <button class="btn btn-info" id="query">查询</button>
        <input type="text" id="queryNum" placeholder="按工号查询" size="6">
        <input type="text" id="queryName" placeholder="按姓名查询" size="6">
    </div>

    <div>
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                </tr>
            </thead>

            <tbody id="content">
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <td id="num">1001</td>
                    <td id="name">张三</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>29</td>
                    <td>1991-1-1</td>
                </tr>

                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <td id="num">1002</td>
                    <td id="name">李四</td>
                    <td>男</td>
                    <td>1234</td>
                    <td>28</td>
                    <td>1992-2-2</td>
                </tr>

                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <td id="num">1003</td>
                    <td id="name">王五</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>27</td>
                    <td>1993-3-3</td>
                </tr>

                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <td id="num">1004</td>
                    <td id="name">赵六</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>26</td>
                    <td>1994-4-4</td>
                </tr>
                    
            </tbody>

        </table>

    </div>


    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    

    <script>
        //编辑
        $("#edit").click(function(){

            $("[type='checkbox']").each(function(){
    
                if (this.checked){
                    $(this).parent().siblings("td").each(function()//找同类元素td
                     {
                        var is_text = $(this).find("input:text");//判断单元格下是否含有文本框
                        if (!is_text.length) {
                            $(this).html("<input size='13' type='text' value=' "+$(this).text()+" ' />");
				    }else{
                        $(this).html(is_text.val());
                    }
			    })
                }
            })

        })

        //添加
        $("#add").click(function (){
            $(this).after($('<button class="btn btn-info" id="save">保存</button>)'));
            
            var tr =  $("<tr>" + 
                '<th> <input type="checkbox"> </th>' + '<td></td>' + '<td></td>' + '<td></td>' + '<td></td>' + '<td></td>' + '<td></td>' +
                "</tr>");
                
            $('#content').append(tr);

            $(tr).find("td").each(function(){
                $(this).html("<input size='13' type='text' value=' "+$(this).text()+" ' />");
             })
           
        
            $("#save").click(function(){
                var last = $('#content').find("tr").last();
                var arr = last.find("td");
                var b = $(arr.get(0)).find("input:first");
                var f = $(b).val();
                last.replaceWith($("<tr>" + 
                    //arr.get(0)是DOM对象，不能混用！
                '<th> <input type="checkbox"> </th>' + 
                //input取val值
                '<td>'+$($(arr.get(0)).find("input:first")).val()+'</td>' + 
                '<td>'+$($(arr.get(1)).find("input:first")).val()+'</td>' + 
                '<td>'+$($(arr.get(2)).find("input:first")).val()+'</td>' + 
                '<td>'+$($(arr.get(3)).find("input:first")).val()+'</td>' + 
                '<td>'+$($(arr.get(4)).find("input:first")).val()+'</td>' + 
                '<td>'+$($(arr.get(5)).find("input:first")).val()+'</td>' +
                "</tr>"))

                $("#save").remove();
            })
            
        });
        
        //删除
        $("#delete").click(function(){

            $("[type='checkbox']").each(function(){

                if (this.checked){
                    $(this).parent().parent().remove();
                }
            })

        })

        //查询
        $("#query").click(function(){
            //查询条件必须同时满足
            var num = $("#queryNum").val();
            var name = $("#queryName").val();
            var arr = new Array();
            $("tr").not("tr:eq(0)").each(function(){
                if ($(this).find("#num").text()==num && $(this).find("#name").text()==name){
                    arr.push(this);
                }
            })
            if (! arr.length){
                //弹框找不到对应的对象
                alert("找不到对应的信息！");
            }
            $(arr).each(function(){
                var arr = $(this).find("td");
                //td取text值
                alert("工号: " + $($(arr).get(0)).text() + "\n" + 
                "姓名: " + $($(arr).get(1)).text() + "\n" +
                "性别: " + $($(arr).get(2)).text() + "\n" +
                "密码: " + $($(arr).get(3)).text() + "\n" +
                "年龄: " + $($(arr).get(4)).text() + "\n" +
                "出生日期: " + $($(arr).get(5)).text()
                );
            })
        })




    </script>


</body>
</html>